<template>
  <div class="nav">
    <div class="scroll-view" ref="itemsWrapper" style="overflow:scroll hidden;">
      <div>
        <div
          class="cu-item text-xs"
          :class="index==TabCur?'text-green cur':''"
          v-for="(item,index) in 10"
          :key="index"
          :data-id="index"
          @click="tabSelect(index)"
        >Tab{{index}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      TabCur: 1,
      scrollLeft: 0
    };
  },
  methods: {
    tabSelect(index) {
      if (index === this.TabCur) {
        return false;
      }
      let itemsWrapper = this.$refs.itemsWrapper;
      
      if (itemsWrapper) {
        const items = itemsWrapper.querySelectorAll(".cu-item");
        const max = itemsWrapper.clientWidth;
        if (items.length) {
         const choseTabItem = items[index];
         itemsWrapper.scrollTo({
             left:choseTabItem.offsetLeft-120,
             top:0,
             behavior:"smooth"
         });
        }
      }

      this.TabCur = index;
    }
  }
};
</script>